/**
 * 弹出框 - 创建、修改
 */
/**
 * TODO formitem 样式
 */


import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {Button, Col, DatePicker, Divider, Form, Icon, Input, Modal, Row, Select, Upload} from 'antd'
import {SbraftEditor} from 'components'

const FormItem = Form.Item
const {TextArea} = Input
const {RangePicker} = DatePicker

// form item 样式
const formItemLayoutWithOneInput = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
}
const formItemLayoutWithTwoInput = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}
const formItemLayoutUpload = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
}


const ArticleModal = ({
                        item = {},
                        editorItem = '',
                        onOk,
                        form: {
                          getFieldDecorator,
                          validateFields,
                          getFieldsValue,
                        },
                        editorProps,
                        ...modalProps
                      }) => {

  const Option = Select.Option

  const handleOk = () => {
    validateFields((err, fieldsValue) => {
      if (err) {
        return
      }
      // 全部字段
      // TODO 当前时间未处理，后台接收原始时间字符串，eg: 2018-07-22T06:33:47.000Z
      const data = {
        ...fieldsValue,
        'validDate': fieldsValue['validDate'].format('YYYY-MM-DD HH:mm:ss'),
        'expireDate': fieldsValue['expireDate'].format('YYYY-MM-DD HH:mm:ss'),
        'key': item.key,
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>

      <Form>

        <Row gutter={24}>
          <Col span={16}>
            {/*标题*/}
            <Col span={24}>
              <FormItem style={{"display": "none"}}>
                {getFieldDecorator('id', {
                  initialValue: item.id,
                  rules: [],
                })(<Input />)}
              </FormItem>
              <FormItem label="文章标题" hasFeedback {...formItemLayoutWithOneInput}>
                {getFieldDecorator('title', {
                  initialValue: item.title,
                  rules: [
                    {
                      required: true,
                      message: "请输入文章标题",
                    },
                  ],
                })(<Input />)}
              </FormItem>
            </Col>

            {/*文章文号*/}
            <Col span={12}>
              <FormItem label="文章文号" hasFeedback {...formItemLayoutWithTwoInput}>
                {getFieldDecorator('sno', {
                  initialValue: item.sno,
                  rules: [
                    {
                      required: false,
                      message: "请输入文章文号",
                    },
                  ],
                })(<Input />)}
              </FormItem>
            </Col>
            {/*文章作者*/}
            <Col span={12}>
              <FormItem label="文章作者" hasFeedback {...formItemLayoutWithTwoInput}>
                {getFieldDecorator('author', {
                  initialValue: item.author,
                  rules: [
                    {
                      required: false,
                      message: "请输入文章作者",
                    },
                  ],
                })(
                  <Input />,
                )}
              </FormItem>
            </Col>

            <Col span={12}>
              <FormItem label="生效日期" hasFeedback {...formItemLayoutWithTwoInput}>
                {getFieldDecorator('validDate', {
                  // initialValue: item.validDate ? moment(item.validDate, "YYYY-HH-DD HH:mm:ss") : undefined,
                  initialValue: item.validDate ? moment(item.validDate) : undefined,
                  rules: [],
                })(
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择文章生效日期"
                  />,
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="失效日期" hasFeedback {...formItemLayoutWithTwoInput}>
                {getFieldDecorator('expireDate', {
                  initialValue: item.expireDate ? moment(item.expireDate) : undefined,
                  rules: [],
                })(
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="选择文章生效日期"
                  />,
                )}
              </FormItem>
            </Col>

            <Col span={24}>
              <FormItem label="文章链接" hasFeedback {...formItemLayoutWithOneInput}>
                {getFieldDecorator('href', {
                  initialValue: item.href,
                  rules: [],
                })(
                  <Input />,
                )}
              </FormItem>
            </Col>

            <Col span={24}>
              <FormItem label="文章导读" hasFeedback {...formItemLayoutWithOneInput}>
                {getFieldDecorator('review', {
                  initialValue: item.review,
                  rules: [],
                })(
                  <TextArea rows={2} />,
                )}
              </FormItem>
            </Col>
          </Col>

          <Col span={8}>
            <FormItem label="Upload" extra="上传文件" {...formItemLayoutUpload} >
              {getFieldDecorator('upload', {
                valuePropName: 'fileList',
                // getValueFromEvent: this.normFile,
              })(
                <Upload name="logo" action="http://localhost:9998/content/article/uploadFile" listType="picture">
                  <Button>
                    <Icon type="upload" /> 点此上传
                  </Button>
                </Upload>,
              )}
            </FormItem>
          </Col>
        </Row>

      </Form>

      <Divider />

      <SbraftEditor {...editorProps} />

    </Modal>
  )
}

ArticleModal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(ArticleModal)
